<template>
  <div>
    <h3>left组件</h3>
    <p ref="abc">left中的p标签</p>
    <button @click="getInnerHTML">获取标签的内容</button>
  </div>
</template>

<script>
export default {
  methods: {
    getInnerHTML () {
      // 在整个页面中查找p标签，很有可能找到其他组件中去了
      // console.log(document.querySelector('p').innerHTML)

      // 使用ref查找元素，只会在当前组件中查找。不会找到其他组件中
      let p = this.$refs.abc
      console.log(p.innerHTML)
    }
  }
}
</script>

<style lang="less" scoped>
</style>